<template>
  <div class="common-layout">
    <el-form :model="formNum" label-width="120px">
      <el-container>
        <el-header height="90px">
          窗口挂号
          <hr/>
          <el-button type="primary" size="large" @click="saveRegister">挂号</el-button>
          <el-button type="primary">清空</el-button>
        </el-header>

        <el-main>
          <div style="text-align: left">基本信息</div>
          <hr/>

          <table style="width: 100%;border: solid 1px">
            <tr>
              <td style="width:10%">病历号</td>
              <td style="width:30%">
                <el-input readonly v-model="formNum.caseNumber"/>
              </td>
              <td>姓名</td>
              <td style="width:30%">
                <el-input v-model="formNum.realName"/>
              </td>
              <td>性别</td>
              <td>
                <el-select placeholder="请选择" v-model="formNum.gender">
                  <el-option label="男" value="男"/>
                  <el-option label="女" value="女"/>
                </el-select>
              </td>
            </tr>


            <tr>
              <td style="width:10%">身份证</td>
              <td style="width:30%">
                <el-input v-model="formNum.cardNumber"/>
              </td>
              <td>出生日期</td>
              <td style="width:30%">
                <el-date-picker v-model="formNum.birthdate"
                                type="date"
                                placeholder="请选择"
                                style="width: 100%"
                />
              </td>
              <td>年龄</td>
              <td>
                <el-input v-model="formNum.age"/>
              </td>
            </tr>


            <tr>
              <td style="width:10%">家庭地址</td>
              <td colspan="5">
                <el-input v-model="formNum.homeAddress"/>
              </td>

            </tr>
          </table>


        </el-main>
        <el-footer>
          <div style="text-align: left">挂号信息</div>
          <hr/>

          <table style="width: 100%;border: solid 1px">
            <tr>
              <td style="width:10%">结算类型</td>
              <td style="width:30%">
                <el-select placeholder="请选择" v-model="formNum.settleCategoryId">
                  <el-option v-for="item in categoryList"
                             :label="item.settleName"
                             :value="item.id" :key="item.id"></el-option>
                </el-select>
              </td>
              <td>看诊日期</td>
              <td style="width:30%">
                <el-date-picker v-model="formNum.visitDate"
                                type="date"
                                placeholder="请选择"
                                style="width: 100%"/>
              </td>
              <td>午别</td>
              <td>
                <el-select placeholder="请选择" v-model="formNum.noon">
                  <el-option label="中午" value="中午"/>
                  <el-option label="下午" value="下午"/>
                </el-select>
              </td>
            </tr>


            <tr>
              <td style="width:10%">挂号科室</td>
              <td style="width:30%">
                <el-select placeholder="请选择" v-model="formNum.deptmentId">
                  <el-option v-for="item in departList" :label="item.deptName"
                             :value="item.id" :key="item.id"></el-option>

                </el-select>
              </td>
              <td>看诊医生</td>
              <td style="width:30%">
                <el-select placeholder="请选择" v-model="formNum.employeeId">
                  <el-option v-for="opt in empList" :label="opt.realname	"
                             :value="opt.id" :key="opt.id"></el-option>
                </el-select>
              </td>
              <td>号别</td>
              <td>
                <el-select placeholder="请选择" v-model="formNum.registLevelId"
                           @change="showRegisterMoney">

                  <el-option  v-for="item in registLevelList"
                              :label="item.registName"
                              :value="item.id"
                              :key="item.id"></el-option>

                </el-select>
              </td>
            </tr>


            <tr>
              <td style="width:10%">初始号额</td>
              <td style="width:30%">
                <el-input readonly v-model="formNum.initNumber"/>
              </td>
              <td>已用号额</td>
              <td style="width:30%">
                <el-input readonly v-model="formNum.currNumber"/>
              </td>
              <td>病历本</td>
              <td>
                <el-select placeholder="请选择" v-model="formNum.isBook">
                  <el-option label="有" value="有"/>
                  <el-option label="无" value="无"/>
                </el-select>
              </td>
            </tr>

            <tr>
              <td style="width:10%">应收金额</td>
              <td style="width:30%">
                <el-input readonly v-model="formNum.registMoney"/>
              </td>
              <td>收费方式</td>
              <td style="width:30%">
                <el-select placeholder="请选择" v-model="formNum.registMethod">
                  <el-option label="现金" value="现金"/>
                  <el-option label="银行卡" value="银行卡"/>
                  <el-option label="医保卡" value="医保卡"/>
                  <el-option label="微信" value="微信"/>
                  <el-option label="支付宝" value="支付宝"/>
                </el-select>
              </td>

            </tr>
          </table>
        </el-footer>
      </el-container>
    </el-form>
  </div>
</template>


<script setup>
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
//定义form表单数据
const formNum = reactive({
  id: 0,
  caseNumber: 0,
  realName: '',
  gender: '男',
  cardNumber: '',
  birthdate: new Date(),
  age: 0,
  homeAddress: '',
  visitDate: new Date(),
  noon: '',
  deptmentId: '',
  employeeId: '',
  registLevelId: '',
  settleCategoryId:'',
  isBook: '',
  registMethod: '',
  registMoney:'',
  visit_state: 1,
  initNumber: '',
  currNumber: ''
});

const empList = ref([]);
//定义集合保存科室列表
const departList = ref([]);
// 定义结算类型列表集合
const categoryList = ref([]);
// 定义保存挂号级别列表的请求
const registLevelList = ref([]);
/*
//当前日期格式化
function dateFormat(){
  var date = new Date()
  var year = date.getFullYear()
  var month = date.getMonth() + 1 < 10 ?
      '0' + (date.getMonth() + 1) : date.getMonth()+ 1
  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
  /!*var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
  var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()*!/
  return year + '-' +month + '-' + day+ '-' + '00:00:00';
}*/

//定义函数发生ajax请求获得病历号
function getCaseNumber() {
  axios.get("http://localhost/his/doCaseNumber")
      .then((response) => {
        formNum.caseNumber = response.data.caseNumber;
        formNum.initNumber = response.data.initNumber;
        formNum.currNumber = response.data.currNumber;

      })
      .catch((error) => {
        console.log(error);
      });
}

/*定义函数发生ajax请求获得医生数据*/
function getEmployee() {
  axios.get("http://localhost/his/initEmployee")
      .then((response) => {
        console.log(response.data)
        empList.value = response.data;

      })
      .catch((error) => {
        console.log(error);
      });
}

/*定义函数发生ajax请求，加载科室数据*/
function getDepartment() {
  axios.get("http://localhost/his/initDepartment")
      .then((response) => {
        console.log(response.data)
        departList.value = response.data;

      })
      .catch((error) => {
        console.log(error);
      });
}

/*定义函数发生ajax请求，加载结算类型数据*/
function getSettleGatecory() {
  axios.get("http://localhost/his/initCategory")
      .then((response) => {
        console.log(response.data)
        categoryList.value = response.data;

      })
      .catch((error) => {
        console.log(error);
      });
}


/*定义函数发生ajax请求，加载结算类型数据*/
function getRegistLevel() {
  axios.get("http://localhost/his/initRegistLevel")
      .then((response) => {
        console.log(response.data)
        registLevelList.value = response.data;

      })
      .catch((error) => {
        console.log(error);
      });
}

/*定义函数根据选择的挂号号别，显示挂号金额
* data 选中的选项的id
* */
function showRegisterMoney(data){

  /*发生ajax请求，根据选中的挂号的级别的id，查询挂号金额*/
  axios.get("http://localhost/his/getRegisterMOney?id="+data)
      .then((response) => {
        console.log(response.data)
        formNum.registMoney = response.data.money;

      })
      .catch((error) => {
        console.log(error);
      });
}
onMounted(() => {
  getCaseNumber();
  getEmployee();
  getDepartment();
  getSettleGatecory();
  getRegistLevel();
});

/*定义函数发生ajax请求实现挂号信息的保存*/
function saveRegister(){
  axios.post("http://localhost/his/saveRegister",formNum)
      .then((response)=>{
        console.log(response);

      })
      .catch((error) => {
        console.log(error);
      });
}

</script>

<style scoped>

</style>